<template>
    <div class="Child1">
        <h1>子1组件</h1>
        <p>玩具：{{ toy }}</p>
        <button @click="updateParentCar($parent)">改变父亲的车辆</button>
    </div>
    </template>
    
    <script lang="ts">
    export default {
    name:'Child1'
    }
    </script>
    
    <script setup lang="ts">
    import { ref } from 'vue';

    let toy = ref('小飞机') 
    //将曝光给父组件
    defineExpose({ toy })

    function updateParentCar(parent:any) { 
        parent.car = '宝马'
    }
    
    </script>
    
    <style lang="css">
    .Child1{
        margin: 20px;
        height: 200px;
        width: 400px;
        background-color:aquamarine;
    }
    </style>